<cfmodule template="../../tag/layout.cfm" bodyIsEasyUILayout="false">
<script type="text/javascript" charset="utf-8" src="assets/scrollbars/jquery.scrollbars.min.js"></script>
<script type="text/javascript" charset="utf-8" src="assets/scrollbars/jquery.scrollbars.min.css"></script>
<script type="text/javascript" charset="utf-8" src="assets/iframeresizer/jquery.browser.js" ></script>
<script type="text/javascript" charset="utf-8" src="assets/iframeresizer/jquery.iframe-auto-height.plugin.js" ></script>
<cfscript>
	if( structKeyExists(rc, "checkedids")  && listlen(rc.checkedids) > 0 ){
		checkedids = rc.checkedids;
	}else{
		checkedids = 0;
	}

	if( structKeyExists(rc, "type")  && listlen(rc.type) > 0 ){
		type = rc.type;
	}else{
		type = 0;
	}
	
	if( structKeyExists(rc, "width")  && rc.width > 0 ){
		width = rc.width;
	}else{
		width = '100%';
	}
	
	if( structKeyExists(rc, "templateid")  && rc.templateid > 0 ){
		templateid = rc.templateid;
	}else{
		templateid = 0;
	}
	
	if( structKeyExists(rc, "height")  && rc.height > 0 ){
		height = rc.height;
	}else{
		height = 0;
	}
</cfscript>
<div id="template"></div>

<input type="hidden" id="templateid" name="templateid" value="<cfoutput>#templateid#</cfoutput>">
<div style=" clear:both; padding:10px; text-align:center; line-height:25px;">
	选择模板进行广告效果演示!
	<br/>
	如果广告宽度、高度值未设置，则宽度将默认为100%，而高度则会根据广告内容自动调节。
</div>
<cfoutput>
	<iframe id="preview" frameborder="0" width="#width#" height="#height#"></iframe>
</cfoutput>


</cfmodule>

<script type="application/javascript">
	<cfif height eq 0>$('iframe').iframeAutoHeight();</cfif>

	var closeDialog = function($dialog) {
		$dialog.dialog('destroy');
	}
	
	var submitForm = function($dialog, $tp) {
		$tp.val( $('#templateid').val() );
		$tp.click();
		$dialog.dialog('destroy');
	}

	//预览操作
	var previewFun = function() {
	    $('#preview').attr('src','?action=adstemplate.preview&templateid='+$(this).attr('id')+'<cfoutput>&checkedids=#checkedids#&width=#width#&height=#height#</cfoutput>');
	    $('#templateid').val( $(this).attr('id') );
	    $('#template ul li img').each(function(){
			$(this).removeClass('selected');
	    })
	    $(this).prop('class','selected');
	};

	$(function(){
		//获取当前的信息分类
		$.ajax({
		    type: "POST",
		    url: "?action=adstemplate.list&type=<cfoutput>#type#</cfoutput>"
		}).done(function(result) {
			html = '<ul>';
			$(result.rows).each(function(i, e){
				if($('#templateid').val() == e.id){
					html += '<li>'+ '<img id='+ e.id +' class="showPreview selected" src="'+e.pic+'">' + '<span>'+ e.subject + '</span>' + '</li>';
				}else{
					html += '<li>'+ '<img id='+ e.id +' class="showPreview" src="'+e.pic+'">' + '<span>'+ e.subject + '</span>' + '</li>';
				}
			})
			html +='</ul>';
			
			$('#template').html(html);
			
			$('#template ul li img').each(function(){
				if($(this).prop('id') == $('#templateid').val() ){
				 	$('#preview').attr('src','?action=adstemplate.preview&templateid='+$(this).attr('id')+'<cfoutput>&checkedids=#checkedids#&width=#width#&height=#height#</cfoutput>');
				}
		    })
		    
		    
			$('.showPreview').on('click',previewFun);
		}, 'json');
		
		$('#template').scrollbars();
	
	});
</script>
